<script setup lang="ts">
import { GameSwiperContainer } from '~comp-b/game';
import DefaultType from '~/assets/imgs/default_type.png';
import { allGamesPopup } from '~/layouts/default/aside-menu/AllGames.vue';

const appStore = useAppStore();
const listQuery = useQuery({
  queryKey: [apis.apiGameProviderList.id],
  queryFn: () => apis.apiGameProviderList({ page: 1, page_size: 30 }),
});

const list = computed(() => listQuery?.data?.value);
const router = useRouter();

function toDetail(item: any) {
  if (item.provider_code === 'ap') {
    allGamesPopup.open({ games: item.game }, { title: 'Sports' });
    return;
  }
  router.push({ name: RN.GAMELISTPROVIDER, params: { providerCode: item.provider_code, providerName: item.name } });
}
</script>

<template>
  <div class="mb-0 lt-tabletl:mb-2.5">
    <div class="mt-3 flex-between text-sys-text-head font-normal lt-mobile:mb-0">
      <div>
        <i class="i-local:handle mr-2 w-4" />
        <span>{{ $t('u4Pa9w4tsyO6UpwFtOuVe') }}</span>
      </div>
      <div class="flex-between gap-1.5 lt-tabletl:hidden *:cursor-pointer *:rounded-lg *:bg-#3E404C">
        <div class="px-5 py-2 !bg-#26272E" @click="$router.push({ name: RN.VENDORS })">
          {{ $t('qr8w4TkIrldt_49pKk6Mi') }}
        </div>
        <div class="supplie-prev p-2 px-2.5">
          <i class="i-ri:arrow-left-s-line text-sm" />
        </div>
        <div class="supplie-next p-2 px-2.5">
          <i class="i-ri:arrow-right-s-line text-sm" />
        </div>
      </div>
    </div>
    <GameSwiperContainer :navigation="{ nextEl: `.supplie-next`, prevEl: `.supplie-prev` }">
      <swiper-slide v-for="i in list" :key="i.alias" class="cursor-pointer" @click="toDetail(i)">
        <div class="h-60px w-full flex-center rounded-lg bg-sys-layer-d lt-tabletl:h-50px *:hover:scale-110">
          <img class="max-w-105px object-cover lt-tabletl:w-80.5px" :src="!!i.image_cover ? appStore.joinCdnPath(i.image_cover) : DefaultType">
        </div>
      </swiper-slide>
    </GameSwiperContainer>
  </div>
  <allGamesPopup.PresetComponent />
</template>

<style scoped lang="scss">
.swiper-button-disabled {
  --uno: '!bg-#26272E !text-#848A9D';
}
</style>
